<template>
  <div>
    <el-form label-width="300px" class="elform">
      <el-form-item label="收件人">
        <el-input v-model="username" type="text" size="30" :maxlength="18" show-word-limit class="input1" placeholder="请输入收件人">
        </el-input>
      </el-form-item>

      <el-form-item label="主题">
        <el-input v-model="title" type="text" size="30" :maxlength="18" show-word-limit class="input1" placeholder="请输入主题">
        </el-input>
      </el-form-item>

      <el-form-item label="正文" :maxlength="8">
        <el-input type="textarea" v-model="message" maxlength="50" show-word-limit class="input1" placeholder="请输入正文"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align:center">
      <el-button type="primary" @click="send">发送</el-button>
      <el-button type="primary" @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script>
import {  } from "../axios_api/api"
export default {
  data() {
    return {
      username:'',
      title:'',
      message:'',
      testsocket:'',
    }
  },
  mounted() {
      
  },
  methods: {
    send:function(){
        this.testsocket = new WebSocket("ws://127.0.0.1:8000/ws/"+ this.username +"/")
        console.log(this.testsocket)
        var data1 = {"message":this.message,"to_user":this.username,'title':this.title}
        console.log(data1)
        this.testsocket.onopen = () => {
            this.testsocket.send(JSON.stringify(data1))
        }
        this.testsocket.onmessage = (res) => {
            console.log("返回结果",res.data);
        }
    },
    close:function(){
      this.testsocket.close()
    }
  }
}
</script>

<style>
.elform {
  margin-top: 5px;
}
.input1 {
  width: 800px;
}
</style>